<template>
  <div class="hhldb-layout">
    <NavBar 
      :backgroundColor="navbarColor" 
      :activeIndex="currentRoute"
      @select="handleSelect"
    />
    <div class="content">
      <router-view />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, computed, watch } from 'vue'
import { useRoute } from 'vue-router'
import NavBar from '@/components/NavBar.vue'

export default defineComponent({
  name: 'HHLDBLayout',
  components: {
    NavBar
  },
  setup() {
    const route = useRoute()
    const navbarColor = ref('#4a90e2') // 默认颜色(蓝色)
    
    // 页面颜色映射
    const pageColors = {
      home: '#4a90e2',      // 蓝色
      search: '#e67e22',    // 橙色
      view: '#2ecc71',      // 绿色
      annotation: '#9b59b6', // 紫色
      analysis: '#e74c3c',  // 红色
      dataSource: '#3498db', // 淡蓝色
      about: '#1abc9c',     // 青绿色
      tools: '#f39c12'      // 黄色
    }
    
    // 计算当前路由对应的导航项
    const currentRoute = computed(() => {
      const path = route.path
      const match = path.match(/\/hhldb\/(.+)/)
      return match ? match[1] : 'home'
    })

    // 根据当前路由更新导航栏颜色
    watch(currentRoute, (newRoute) => {
      const routeName = newRoute as keyof typeof pageColors
      navbarColor.value = pageColors[routeName] || pageColors.home
    }, { immediate: true })

    // 处理导航栏选择事件
    const handleSelect = (index: string) => {
      console.log('Selected:', index)
    }

    return {
      navbarColor,
      currentRoute,
      handleSelect
    }
  }
})
</script>

<style scoped>
.hhldb-layout {
  min-height: 100vh;
  width: 100%;
}

.content {
  min-height: calc(100vh - 70px);
  width: 100%;
  padding: 20px;
  margin-top: 70px;
}
</style> 